<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer
      title="滤芯列表"
      :width="screenWidth"
      @close="onClose"
      :visible="visible"
    >
      <!-- 抽屉内容的border -->
      <div
        :style="{
          padding:'10px',
          border: '1px solid #e9e9e9',
          background: '#fff',
        }">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" :form="form">
            <a-row :gutter="10">
              <a-col :md="12" :sm="12">
                <a-form-item label="设备编号">
                    {{equipment.equipmentId}}
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="所属代理" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  {{equipment.departName}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="12" :sm="12">
                <a-form-item label="客户名称">
                    {{equipment.clientName}}
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="硬件编号"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                  {{equipment.ids}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="12" :sm="12">
                <a-form-item label="启用状态">
                    {{equipment.enabled_dictText}}
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="租赁状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  {{equipment.leasestate_dictText}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="12" :sm="12">
                <a-form-item label="商品名称">
                    {{equipment.commodityName}}
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="主板状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  {{equipment.mainboard_dictText}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="12" :sm="12">
                <a-form-item label="滤芯状态">
                    {{equipment.filterelementType_dictText}}
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="损耗比例" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  {{equipment.lossratio*100}}%
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="24" :sm="12">
                <a-form-item label="用户备注">
                    {{equipment.remarks}}
                </a-form-item>
              </a-col>

            </a-row>
          </a-form>
        </div>
        <div>
          <a-table
            ref="table"
            rowKey="id"
            size="middle"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >

          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定更换吗?" @confirm="() => myReplaceFilterElement(record.recordId)">
              <a>更换</a>
            </a-popconfirm>
          </span>
          </a-table>
        </div>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>
  import pick from 'lodash.pick'
  import {filterObj} from '@/utils/util';
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {replaceFilterElement} from '@/api/api'
  import {getAction} from '@/api/manage'

  export default {
    name: "FilterelementReplaceList",
    mixins: [JeecgListMixin],
    data() {
      return {
        columns: [
          {
            title: '滤芯名称',
            align: "center",
            dataIndex: 'filterelementName',
          },
          {
            title: '可用天数',
            align: "center",
            dataIndex: 'myvalidity',
            customRender: (text, row, index) => {
                  return  text+"天";
            },
          },
          {
            title: '最低更换天数',
            align: "center",
            dataIndex: 'replacementDays',
             customRender: (text, row, index) => {
                  return  text+"天";
            },
          },
          {
            title: '已用天数',
            align: "center",
            dataIndex: 'daysused',//
             customRender: (text, row, index) => {
                  return  text+"天";
            },
          },
          {
            title: '剩余可用天数',
            align: "center",
            dataIndex: 'daysRemaining',
             customRender: (text, row, index) => {
                  return  text+"天";
            },
          },
           {
            title: '是否提醒',
            align: "center",
            dataIndex: 'remind_dictText',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        queryParam: {
          typeId: "",
        },
        title: "操作",
        visible: false,
        equipment:{},
        screenWidth: 800,
        model: {},
        typeId: "",
        status: 1,
        labelCol: {
          xs: {span: 5},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 12},
          sm: {span: 12},
        },
        form: this.$form.createForm(this),

        url: {
          list: "/equipment/filterelementReplace/list",
        },
      }
    },
    created() {
      // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
      this.resetScreenSize();
    },
    methods: {
      myReplaceFilterElement(recordId){
        var that = this;
        debugger
        replaceFilterElement({recordId:recordId,equipmentId:this.equipmentId}).then((res)=>{
          if(res.success){
            that.$message.success(res.message)
            // 重新刷新子页面的表格
            that.loadData();
            //刷新主页面的表格
            that.$emit('ok');
            //刷新当前设备的基础数据
            getAction("/equipment/equipment/getEquipment",{equipmentId:this.equipmentId}).then((res)=>{
              if(res.success){

                that.equipment = Object.assign(that.equipment, {filterelementType_dictText:res.result.records[0].filterelementType_dictText});
              }
            });

          }else{
            that.$message.warning(res.message);
          }
        })
      },
      add(record) {
        this.equipment = Object.assign({}, record);
        this.equipmentId = record.equipmentId;
        this.edit({});
      },
      edit(record) {
        if (record.id) {
          this.equipmentId = record.id;
        }
        this.queryParam = {}
        this.model = Object.assign({}, record);
        this.model.equipmentId = this.equipmentId;
        this.model.status = this.status;
        this.visible = true;

        // 当其它模块调用该模块时,调用此方法加载字典数据
        this.loadData();
      },

      getQueryParams() {
        var param = Object.assign({}, this.queryParam);
        param.equipmentId = this.equipmentId;
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },

      showDrawer() {
        this.visible = true
      },
      onClose() {
        this.visible = false
        this.form.resetFields();
        this.dataSource = [];
      },
      // 抽屉的宽度随着屏幕大小来改变
      resetScreenSize() {
          //获得当前屏幕的宽度
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 600) {
          this.screenWidth = screenWidth;
        } else {
          this.screenWidth = 866;
        }
      },
    }
  }
</script>
<style scoped>
</style>